

<!-- 详情菜单 -->
<template>
	<view class="detailMenu">

		<!-- 菜单列表 -->
		<view class="menuList-Container">
			<image class="menu-outerBg" :src="icon.menuBg" mode=""></image>
			<view class="item-Container" @click="msgCenter()">
				<view class="item">
					<image class="icon" src="/static/images/common/msgBtn.png"></image>
					<view class="text">消息</view>
					<view class="tipsNum" v-if="noticeTipCount">{{noticeTipCount + $store.state.msgNumber>99 ? '99+' : noticeTipCount + $store.state.msgNumber}}</view>
				</view>
			</view>
			<view class="item-Container" @click="gotoHome()">
				<view class="item">
					<image class="icon" src="/static/images/common/indexBtn.png"></image>
					<view class="text">首页</view>
				</view>
			</view>
			<view class="item-Container" @click="gotoSearch()">
				<view class="item">
					<image class="icon" src="/static/images/common/searchBtn.png"></image>
					<view class="text">搜索</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,  
		mapMutations  
	} from 'vuex';  

	export default {
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				icon: {
					menuBg: "/static/images/common/menuBg.png"
				},
				noticeTipCount: 0
			};
		},
		mounted() {
			
			if (this.hasLogin) {
				
				let that = this;
				this.$api.globalUtil.requestAjax({
					url: '/customerNoticeApi/customerNoticeUnreadCountApi',
					method: 'POST',
					data: {
						cnType: "",
						cnStatus: '0'
					},
					success: function(res) {
						that.noticeTipCount = res.data.response;
						uni.$emit('noticeTipCountUpdate');
					}
				});
			}
		},
		methods: {

			/**
			 * 消息中心
			 */
			msgCenter: function() {
				this.showFlag = false;
				uni.navigateTo({
					url: '/pagesUser/msgCenter'
				})
			},

			/**
			 * 首页入口
			 */
			gotoHome() {
				this.showFlag = false;
				wx.switchTab({
					url: '/pages/index/index'
				});
			},
			
			
			/**
			 * 搜索入口
			 */
			gotoSearch() {
				this.showFlag = false;
				uni.navigateTo({
					url: '/pagesGoods/product/list'
				});
			}
		}
	};
</script>
<style lang="scss">
	
	/* 详情菜单 */
	.menu-bg {
		position: absolute;
		top: 0;
		right: 0;
		width: 57rpx;
		height: 56rpx;
	}
	
	.menuList-Container {
		z-index: 99999;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		position: absolute;
		right: 30rpx;
		width: 202rpx;
		padding-top: 10upx;
		top: calc(var(--status-bar-height) + 88rpx - 20rpx) !important;
		
		/* #ifdef MP-WEIXIN */
		top: calc(var(--status-bar-height) + 176rpx - 20rpx) !important;
		/* #endif */
		
		
		.menu-outerBg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		
		.item-Container {
			position: relative;
			width: 100%;
			height: 76rpx;
			border-bottom: 1rpx solid rgba(223,223,223,1);
		}
		
		
		.item-Container:last-of-type {
			border-bottom: 0;
		}
		.item-Container .share-btn {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			opacity: 0;
		}
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			padding-right: 68rpx;
			/* width: 110rpx; */
			height: 100%;
		}
		.item-Container:nth-of-type(1) {
			.icon {
				margin-left: 26rpx;
				width: 30rpx;
				height: 31rpx;
			}
		}
		.item-Container:nth-of-type(2) {
			.icon {
				margin-left: 25rpx;
				width: 32rpx;
				height: 28rpx;
			}
		}
		.item-Container:nth-of-type(3) {
			.icon {
				margin-left: 28rpx;
				width: 27rpx;
				height: 26rpx;
			}
		}
		.item {
			.text {
				font-size:26rpx;
				font-family:PingFang SC;
				/* font-weight:500; */
				color:rgba(51,51,51,1);
			}
		}
	}
	
	.tipsNum {
		padding: 0 4rpx;
		position: absolute;
		top: 10rpx;
		left: 45rpx;
		min-width: 22rpx;
		height: 22rpx;
		line-height: 22rpx;
		text-align: center;
		font-size: 18rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color:rgba(219,13,83,1);
		border-radius: 11rpx;
		background:rgba(255,255,255,1);
		border:0.5px solid rgba(210,23,40,1);
		border-radius: 22rpx;
	}
</style>



